<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form-create示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/iview@2.14.3/dist/styles/iview.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/iview@2.14.3/dist/iview.js"></script>
<script src="https://cdn.jsdelivr.net/npm/form-create/district/province_city.js"></script>
<script src="./form-create.min.js"></script>
<script src="./json.js"></script>
</head>
<body>
<div id="app1">
<h2>组件模式生成 | <a href="json.js" target="__blank">查看生成规则</a></h2>
<form-create ref="fc" v-model="fApi" :rule="rule" :option="option" @goods-name-change="change" @goods-name2-click="change" @xaboy-change="change"></form-create>
</div>
<div id="app2">
<h2 style="cursor: pointer;"><span onclick="vm.create()">点击使用Vue原型方法生成</span> | <a href="json.js" target="__blank">查看生成规则</a></h2>
</div>
<div id="app3">
<h2 style="cursor: pointer;"><span onclick="create2()">点击使用全局方法生成</span> | <a href="json.js" target="__blank">查看生成规则</a></h2>
</div>
<script>

    //组件模式
    _vm = new Vue({
        el:'#app1',
        data:{
            formModel:{},
            rule:jsonMock(),
            option:{
                //显示表单重置按钮
                resetBtn:true,
                iframeHelper:true,
				//
                upload:{
                    'beforeUpload':function (res) {
                        console.log(res);
                    }
                },
                //表单提交事件
                onSubmit:function (formData) {
                    alert(JSON.stringify(formData));
                    //按钮进入提交状态
                    $f.btn.loading();
                    //重置按钮禁用
                    $f.resetBtn.disabled();
                    //按钮进入可点击状态
//                    $f.btn.finish();
                    //创建第二个表单
                    $f = that.$formCreate(mock,root);
                },
	            mounted($f){
		            var $m = $f.model();
                    $m.goods_name.value += " now";
	            },
	            //onReload 表单重载是触发 用与更新$f
                onReload($f){
                    console.log($f);
                }
            },
            fApi:{}
        },
        watch:{
            'formData.address':{
                handler:function (n) {
                    console.log(n);
                },
                deep:true
            }
        },
        methods:{
            change:function (...arg) {
                console.log(arg);
            }
        },
        mounted:function () {
            console.log(this.fApi);
            $f = this.fApi;
            //实际开发中记得加 var
            this.formModel = this.fApi.model();
        }
    });
    var _m1 = false;
    //$formCreate构造方法生成
    vm = new Vue({
        el:'#app2',
        data:{
            formData:{},
            rule:jsonMock()
        },
        watch:{
            'formData.address':{
                handler:function (n) {
                    console.log(n);
                },
                deep:true
            }
        },
        methods:{
            create:function () {
                if(_m1) return ;
                _m1 = true;
                //var root = document.getElementById('app2');
                var root = this.$el;
                //frame,upload组件请在线上环境测试
                $f_2 = this.$formCreate(this.rule,{
                    //表单插入的父级元素
                    el:root,
                    //显示表单重置按钮
                    resetBtn:true,
                    //表单提交事件
                    onSubmit:function (formData) {
                        alert(JSON.stringify(formData));
                        //按钮进入提交状态
                        $f_2.btn.loading();
                        //重置按钮禁用
                        $f_2.resetBtn.disabled();
                        //按钮进入可点击状态
//                    $f_2.btn.finish();
                        //创建第二个表单
                        $f2 = that.$formCreate(mock,root);
                    },
                    mounted:function () {
                        _m1 = false;
                    }
                });
                //注入表单数据，双向数据绑定
                this.formData = $f_2.model();
                console.log(this.formData);
            }
        },
        mounted:function(){
//           this.create();
        }
    });

    var _m2 = false;
    function create2() {
        if(_m2)return ;
        _m2 = true;
        _rule = jsonMock();
        //全局方法生成
        $f_3 = formCreate.create(_rule,{
            //表单插入的父级元素
            el:document.getElementById('app3'),
            //显示表单重置按钮
            resetBtn:true,
            //表单提交事件
            onSubmit:function (formData) {
                alert(JSON.stringify(formData));
                //按钮进入提交状态
                $f_3.btn.loading();
                //重置按钮禁用
                $f_3.resetBtn.disabled();
                //按钮进入可点击状态
//            $f_3.btn.finish();
            },
            mounted:function () {
                _m2 = false;
            }
        });
    }
</script>
</body>
</html>
